<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    .svg-defs {
  position: absolute;
}

.texts {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 520px;
  height: 300px;
}

.rect-1,
.rect-2 {
  font: bold 5em/1 Georgia;
  fill: url(#p-stripes);
  fill: url(#v-gradient);
}

text {
  font: bold 2.6em/1 Georgia;
}

.text-1 {
  fill: url(#p-stripes);
  font-size: 5.3em;
}

.text-2 {
  fill: url(#v-gradient);
}

  </style>
  <meta charset="UTF-8">

  <title>HTML5/CSS3颜色渐变文字 可指定文字路径在线演示</title>

  <link rel="stylesheet" href="css/reset.css">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
  <svg class="svg-defs">
  <g>
    <defs>
      <path id="path1" transform="scale(2)" d="M 30,30 150,30 50,50 140,70 " fill="none" stroke="red"/>

      <path id="half-c" d="M 20,20 C 150,20 150,150 20,150"/>

      <path id="MyPath-save"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />

      <path id="MyPath1"
          d="M 100 300 
             A100,110 0 0,1 500,300" 
            transform="scale(.9)"/>

      <path id="MyPath2"
          d="M 100 300 
             A100,110 0 0,1 500,300" 
            transform="scale(.6)"/>

      <linearGradient id="v-gradient" x1="0" y1="0" x2="100%" y2="0%">
          <stop stop-color="hsl(45,100%,65%)" offset="0"/>
          <stop stop-color="hsl(320,100%,65%)" offset="50%"/>
          <stop stop-color="hsl(200,100%,60%)" offset="100%"/>
        </linearGradient>  

      <linearGradient id="MyGradient" x1="0" y1="0" x2="100%" y2="0%"> 
          <stop offset="0%" stop-color="crimson" /><stop offset="10%" stop-color="purple" />
          <stop offset="10%" stop-color="red" /><stop offset="20%" stop-color="crimson" />
          <stop offset="20%" stop-color="orangered" /><stop offset="30%" stop-color="red" />
          <stop offset="30%" stop-color="orange" /><stop offset="40%" stop-color="orangered" />
          <stop offset="40%" stop-color="gold" /><stop offset="50%" stop-color="orange" />
          <stop offset="50%" stop-color="yellowgreen" /><stop offset="60%" stop-color="gold" />
          <stop offset="60%" stop-color="green" /><stop offset="70%" stop-color="yellowgreen" />
          <stop offset="70%" stop-color="steelblue" /><stop offset="80%" stop-color="skyblue" />
          <stop offset="80%" stop-color="mediumpurple" /><stop offset="90%" stop-color="steelblue" />
          <stop offset="90%" stop-color="purple" /><stop offset="100%" stop-color="mediumpurple" />
        </linearGradient>

      <pattern id="p-stripes" patternUnits="userSpaceOnUse"
                 width="200" height="200" 
                 viewbox="0 0 200 200">
          <rect width="200" height="200" fill="url(#MyGradient)"/>
        </pattern>
    </defs>
  </g>

  <!--<rect class="rect-1" x="43" y="45" width="200" height="200"
          fill="orange"/>
  <rect class="rect-2" width="200" height="200" fill="green"/>-->

  <!--<path id="path1" transform="scale(2.5)" d="M 30,30 150,30 50,50 140,70" fill="none" stroke="red"/>-->

  <!--<use xlink:href="#MyPath1"
       fill="none"
       stroke="orange" stroke-width="5"/>-->
 </svg>
<svg class="texts">
  <text class="text-1" transform="translate(0)">
    <textPath xlink:href="#MyPath1">Long rainbow</textPath>
  </text>

  <text class="text-2" transform="translate(95 85)">
    <textPath xlink:href="#MyPath2">Text with gradient</textPath>
  </text>

</svg>

</body>

</html>